<!DOCTYPE html> <!-- 文档类型声明 html4 xhtml 作用:-->
<html lang="zh">
<head>

    <!-- 
        <base href="http://www.w3school.com.cn/i/" />
        <base target="_blank" /> 
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML CSS Javascript">
    <meta name="description" content="描述信息，网页的主要内容">
    <meta name="author" content="someone">
    <!-- <meta http-equiv="Refresh" content="60"> 自动刷新 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 只有IE浏览器能识别，用于何种文档模式 IE8/IE9 -->
    <title>html基础</title>
</head>
<body>
    <h2>注释</h2>
    <!--
        url: (Uniform Resourse Locator) 统一资源定位符
        https://mbd.baidu.com:8080/newspage/data/landingsuper?context=news_95&n_type=0#/a/b/c
        协议  域名或IP地址     端口 path                       query                    hash
    -->
    <!-- 
        注释， 不能嵌套
    -->

    <h2>h1 - h6</h2>
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

    <h2>p标签</h2>
    <p>
        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
    </p>
    <div class="demo-div">
        我是DIV
    </div>

    <h2>hr</h2>
    <hr>

    <h2>ul 和 li</h2>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <h2>ol 和 li</h2>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

    <h2>dl 和 dt 和 dd</h2>
    <dl>
        <dt>水果类</dt>
        <dt>苹果</dt>
        <dd>西瓜</dd>
        <dd>大鸭梨</dd>

        <dt>蔬菜类</dt>
        <dd>西红柿</dd>
        <dd>花菜/dd>
        <dd>韭菜</dd>
    </dl>

    <h2>table</h2>

    <table 
        width="100%" height="150" 
        border="1" cellspacing='0' cellpadding="0"
        style="border-collapse:collapse;"
    >
        <caption>表格的标题</caption>
        <thead>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1.1</td>
                <td>1.2</td>
                <td>1.3</td>
                <td>1.4</td>
            </tr>
            <tr align="left">
                <!-- <td>2.1</td> -->
                <td>2.2</td>
                <td colspan="2">2.3</td>
                <!-- <td>2.4</td> -->
            </tr>
            <tr align="left">
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
                <td>3.4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>foot.1</td>
                <td>foot.2</td>
                <td>foot.3</td>
                <td>foot.4</td>
            </tr>
        </tfoot>
    </table>
    <h2>form</h2>

    <!-- 
        form表单的 enctype
        application/x-www-form-urlencoded	在发送前编码所有字符（默认）
        multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
        text/plain	空格转换为 "+" 加号，但不对特殊字符编码。
    -->
    <form name="fomeName" action="/demo/update" method="POST" enctype="multipart/form-data">
        <fieldset>
            <legend>表单集合1</legend>
            <label for="name1">用户名</label>
            <input id="name1" name="name1" type='text' maxlength="5"></input>
            <br>
            <label for="passwd1">密码</label>
            <input id="passwd1" name="passwd1" type='password'></input>
            <br>
            <label for="fruit">水果</label>
            <select name="fruit[]" id="fruit">
                <option value="">------</option>
                <optgroup label="水果分类一">
                    <option value="1">香蕉</option>
                    <option value="2">苹果</option>
                </optgroup>
                <optgroup label="水果分类二">
                    <option value="3">百香果</option>
                    <option value="4">大鸭梨</option>
                </optgroup>
                <option value="5">西瓜</option>
            </select>
            <br>
            <label for="cts">数值input：</label>
            <input type="number" min="0" max="120" step="2" id="n1" name="age" pattern="\d+">
            <br>
            <label for="dtinput">date</label>
            <input name="dtinput" id="dtinput" type="date"></input>
            <br>
            <label for="dfile">文件</label>
            <input name="dfile" id="dfile" type="file"></input>
            <br>
            <label for="colorinput">颜色</label>
            <input name="colorinput" id="colorinput" type="color"></input>
            <br>
            <label for="emailinput">Email</label>
            <input name="emailinput" id="emailinput" type="email"></input>
            <br>
            <label for="vtextarea"> textarea</label>
            <textarea name ="vtextarea" rows="10" cols="5"></textarea>
            <br>
            <input type="hidden" name="hname" value="隐藏的提交文本">
        </fieldset>
        <fieldset>
            <legend>表单集合2</legend>
            <label>性别:</label>
            <input name="gender" type='radio' value="male" checked>男</input>
            <input name="gender" type='radio' value="femail">女</input>
            <input name="gender" type='radio' value="notknow">未知</input>
            <br>
            <label>技能:</label>
            <input name="skill" value="java" type='checkbox'>java</input>
            <input name="skill" value="php" type='checkbox'>php</input>
            <input name="skill" value="html" type='checkbox' checked>html</input>
            <input name="skill" value="css" type='checkbox'>css</input>
            <input name="skill" value="android" type='checkbox'>android</input>
        </fieldset>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
    <h2>iframe</h2>
    <iframe style="width: 300px; height: 300px;" src="iframePage.html" name="iframe1"></iframe>
    <h2>pre</h2>
    <pre>
        一段直接输出，不处理的文字


        包括换行，也直接输出

    </pre>
    <h2>code</h2>
    <pre>
        <code>
            // 代码片段
            var v = 1;
            console.log(1);
        </code>
    </pre>
    <blockquote>blockquote</blockquote>
    <h2>a标签</h2>
    <a href="https://www.baidu.com" target="_blank">导航到百度</a>
    <a href="#">刷新当前页面</a>
    <a href="###">刷新2</a>
    <a href="javascript:void(0)"">假链接</a>
    <a href="http://127.0.0.1/001.mp3" download="001.mp3">a标签页可以用于下载文件（限本域名下）</a>
    </a>
    <br>
    <div style="width: 120px; height: 120px; background-color: brown;">
        <img
            src="http://n.sinaimg.cn/news/1_img/dfic/6d34f853/106/w1024h682/20191013/3d00-ifvwftk2367181.jpg"
            title="悬停显示"
            width="200"
            height="120"
            alt="图片无法加载时显示"
        ></img>
    </div>
    <marquee direction="right" scrollamount="10" loop behavior="alternate">跑马灯</marquee>
    <video preload="auto" controls autoplay class="" width="300" height="300" src="https://v-cdn.zjol.com.cn/280443.mp4"></video>
    <br>
    <!-- 
        <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
        <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
        你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
    -->
    <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#FF0000";
        ctx.fillRect(30,30,150,75);
    </script>
    <br>
    <!-- 
        SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
        SVG 用于定义用于网络的基于矢量的图形
        SVG 使用 XML 格式定义图形
        SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>
    <!-- 
        htm5新定义的
        <article> 定义页面独立的内容区域。
        <aside> 定义页面的侧边栏内容
        <header> 定义了文档的头部区域
        <section> 定义文档中的节（section、区段）。
        <footer> 定义 section 或 document 的页脚。
        <figure> 规定独立的流内容（图像、图表、照片、代码等等）。
        ......
    -->

</body>
</html>
